<template>
  <div>
    <!-- 文件夹 -->
    <div 
      v-if="item.type === 'folder'"
      class="file-item flex items-center px-3 py-1 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 group"
      @click="$emit('toggle', item)"
    >
      <ChevronRight 
        v-if="!item.expanded" 
        class="w-3 h-3 mr-1 text-gray-400 transition-transform" 
      />
      <ChevronDown 
        v-else 
        class="w-3 h-3 mr-1 text-gray-400 transition-transform" 
      />
      <Folder class="w-4 h-4 mr-2 text-blue-500" />
      <span class="flex-1 text-sm text-gray-700 dark:text-gray-300">{{ item.name }}</span>
      <div class="opacity-0 group-hover:opacity-100 flex items-center space-x-1">
        <button 
          @click.stop="$emit('rename', item)"
          class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
          title="重命名"
        >
          <Edit3 class="w-3 h-3" />
        </button>
        <button 
          @click.stop="$emit('delete', item)"
          class="p-1 hover:bg-red-200 dark:hover:bg-red-800 rounded text-red-600"
          title="删除"
        >
          <Trash2 class="w-3 h-3" />
        </button>
      </div>
    </div>

    <!-- 文件 -->
    <div 
      v-else
      class="file-item flex items-center px-3 py-1 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 group ml-4"
      :class="{ 'bg-blue-100 dark:bg-blue-900': item.name === currentFile }"
      @click="$emit('select', item)"
      @contextmenu.prevent="showFileMenu(item, $event)"
    >
      <FileText class="w-4 h-4 mr-3 text-gray-500" />
      <span class="flex-1 text-sm truncate text-gray-700 dark:text-gray-300">{{ item.name }}</span>
      <div class="opacity-0 group-hover:opacity-100 flex items-center space-x-1">
        <button 
          @click.stop="$emit('rename', item)"
          class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
          title="重命名"
        >
          <Edit3 class="w-3 h-3" />
        </button>
        <button 
          @click.stop="$emit('delete', item)"
          class="p-1 hover:bg-red-200 dark:hover:bg-red-800 rounded text-red-600"
          title="删除"
        >
          <Trash2 class="w-3 h-3" />
        </button>
      </div>
    </div>

    <!-- 子文件夹和文件 -->
    <div v-if="item.type === 'folder' && item.expanded && item.children" class="ml-4">
      <FileTreeItem 
        v-for="child in item.children" 
        :key="child.path"
        :item="child"
        :current-file="currentFile"
        @select="$emit('select', $event)"
        @rename="$emit('rename', $event)"
        @delete="$emit('delete', $event)"
        @toggle="$emit('toggle', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChevronRight, ChevronDown, Folder, FileText, Edit3, Trash2 } from 'lucide-vue-next'

interface FileTreeItem {
  name: string
  path: string
  type: 'file' | 'folder'
  expanded?: boolean
  children?: FileTreeItem[]
  content?: string
}

defineProps<{
  item: FileTreeItem
  currentFile: string
}>()

defineEmits<{
  select: [item: FileTreeItem]
  rename: [item: FileTreeItem]
  delete: [item: FileTreeItem]
  toggle: [item: FileTreeItem]
}>()

const showFileMenu = (item: FileTreeItem, event: MouseEvent) => {
  console.log('显示文件右键菜单:', item.name)
}
</script>

<style scoped>
.file-item {
  transition: all 0.2s ease;
}

.file-item:hover {
  transform: translateX(2px);
}
</style>